<style lang="scss">
@import "./index.scss";
@import "./lesson.scss";

$cls: '.z-page-lesson-play';
#{$cls} {
  image-rendering: pixelated;
  background-color: #f3f8ff;

  .z-video-player {
    &__video {
      width: 100%;
    }
  }

  .z-tabs sp-tab {
    padding: 10px 0;
    &[selected] {
      color: #638CFF;
    }
    & + sp-tab-panel + sp-tab {
      margin-left: 30px;
    }
  }

  .qus-editor {
    .ql-toolbar.ql-snow {
      border-top: 0;
      position: relative;
    }
    .cus-div {
      border-color: transparent;
    }
    .ql-formats:not(.z-page-lesson-play__ql) {
      display: none;
    }
    .z-page-lesson-play__ql {
      margin-right: 10px;
    }
  }

  &__img {
    width: 156px;
    background: #2B62FF;
    border-radius: 4px;
  }
  &__main {
    background: #FFFFFF;
    box-shadow: 0px 2px 5px 0px rgba(111, 128, 146, 0.1);
    border-radius: 4px;
    padding: 10px 27px;
    box-sizing: border-box;
  }
  &__header {
    //background: #E8E8E8;
    //border-bottom: 1px dashed #E8E8E8;

  }
  &__play-con {
    padding-top: 30px;
    box-sizing: border-box;
  }
  &__border {
    margin-top: 10px;
    height: 1px;
    transform: translateX(-5px);
    background-image: repeating-linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0) 5px, #E8E8E8 5px,  #E8E8E8 20px, rgba(0,0,0,0) 10px);
  }

  .fox-detail-panel__h::after {
    background-color: transparent;
    background-image: repeating-linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0) 5px, #E8E8E8 5px,  #E8E8E8 20px, rgba(0,0,0,0) 10px);

  }
  &__comment-title {
    font-size: 24px;
    font-weight: 400;
    color: #242424;
    line-height: 40px;
  }
  &__avatar {
    width: 48px;
    height: 48px;
    background: #2B62FF;
    border-radius: 50%;
  }
  &__search-con {
    border-radius: 1000px;
    height: 40px;
    .el-input__inner {
      border: none;
    }
  }
  &__video-list {
    padding: 10px 19px;
    box-sizing: border-box;
    min-height: 300px;
  }

  &__relate {
    padding: 10px 0;
    box-sizing: border-box;
    min-height: 300px;
  }

  &__source-card {
    width: 100%;
    padding: 10px 20px;
    border: 1px solid #D7DEF3;
    box-sizing: border-box;
    &.actived {
      border: 1px solid #D7DEF3;
      color: #2F66FF;
    }
  }

  &__relate-item {
    padding: 10px;
    padding-bottom: 0;
    box-sizing: border-box;
    [index] {
      font-size: 26px;
      font-family: Cambria Math;
      font-style: italic;
    }
    [content] {
      font-size: 18px;
      font-family: Adobe Heiti Std;
      font-weight: normal;
      color: #292929;
      margin-left: 3px;
    }
  }
  &__submit {
    width: 70px !important;
    height: 26px !important;
    background: #2B62FF !important;
    border-radius: 4px;
    padding-left: 0 !important;
    padding-right: 0 !important;
    position: absolute; right: 18px; top: 8px;
    &:hover {
      color: #fff !important;
    }
  }
  &__icon {
    cursor: pointer;
    --icon-width: 20px;
    width: var(--icon-width);
    overflow: hidden;
    //img {
    //  transform: translateX(calc(-1 * #{var(--icon-width)}));
    //  filter: drop-shadow(#b3b3b3  #{var(--icon-width)} 0);
    //  transition: filter ease .2s;
    //}
    &:hover {
      img {
        filter: drop-shadow(#386bfe #{var(--icon-width)} 0);
        transform: translateX(calc(-1 * #{var(--icon-width)}));
      }
    }


    padding-right: 11px;
    margin-right: 12px;
    &:last-child {
      margin-right: 0;
      padding-right: 0;
    }
  }
}

.z-page-lesson-play__body {
  padding: 10px;
  box-sizing: border-box;
}

.z-page-lesson-play__title {
  font-size: 24px;
  font-weight: 400;
  color: #242424;
  line-height: 40px;
}

.z-page-lesson-play__comment {
  padding-top: 20px;
  padding-bottom: 20px;
  box-sizing: border-box;
}

</style>

<template>
  <div class="z-page-lesson-common z-page-lesson-play">
    <zw-row
        class="z-page-lesson-play__body"
        style="grid-template-columns: 1fr 330px "
        :id="item_id"
        gutter="12px">
      <zw-layout column>
        <div class="z-page-lesson-play__main">
          <div class="z-page-lesson-play__header">
            <div class="z-page-lesson-play__title">今日热点资讯：固安县政府...</div>
            <zw-row   style="grid-template-columns: 1fr 1fr ">
              <div>来源：<span></span> 时间：<span>2022-05-01 18:00:00</span></div>
              <div>
                <zw-layout row style="align-items: center; justify-content: flex-end;">
                  <div
                      class="z-page-lesson-play__icon">
                    <img
                        src="">
                  </div>
                  <div
                      class="z-page-lesson-play__icon">
                    <img
                        src="">
                  </div>
                  <div
                      class="z-page-lesson-play__icon">
                    <img
                        src="">
                  </div>
                  <div
                      class="z-page-lesson-play__icon">
                    <img
                        src="">
                  </div>
                  <div
                      class="z-page-lesson-play__icon">
                    <img
                        src="">
                  </div>

                  <div
                      class="z-page-lesson-play__icon" style="--icon-width: 22px">
                    <img
                        src="">
                  </div>
                  <div
                      class="z-page-lesson-play__icon" style="--icon-width: 22px">
                    <img
                        src="">
                  </div>
                  <div
                      class="z-page-lesson-play__icon" style="--icon-width: 24px">
                    <img
                        src="">
                  </div>
                  <div
                      class="z-page-lesson-play__icon" style="--icon-width: 24px">
                    <img
                        src="">
                  </div>
                </zw-layout>
              </div>
            </zw-row>
            <div class="z-page-lesson-play__border"></div>
          </div>
          <div class="z-page-lesson-play__play-con">
            <z-video-player :options="playerOptions"></z-video-player>
            <div class="z-page-lesson-play__border" style="margin-top: 30px"></div>
          </div>
          <div class="z-page-lesson-play__comment">
            <div class="z-page-lesson-play__comment-title">评论（0）</div>
            <zw-row   style="grid-template-columns: 62px 1fr " >
              <div>
                <div class="z-page-lesson-play__avatar"></div>
              </div>
              <div>
                <z-quill-editor :tool-bar-bottom="true">
                  <template #toolbar>
                     <span class="ql-formats z-page-lesson-play__ql">
                       <button class="ql-emoji" value="emoji">
                        <img src="" alt="">
                       </button>
                    </span>
                    <span class="ql-formats z-page-lesson-play__ql">
                       <button class="ql-doc" value="doc">
                       <img src="">
                        </button>
                    </span>
                    <span class="ql-formats z-page-lesson-play__ql">
                       <button class="ql-file" value="file">
                         <img src="">
                       </button>
                    </span>
                    <el-button type="primary"
                               class="z-page-lesson-play__ql z-page-lesson-play__submit"

                    >发布</el-button>
                  </template>
                </z-quill-editor>
              </div>
            </zw-row>
          </div>
        </div>


      </zw-layout>
      <div>
        <div class="z-page-lesson-common__card z-page-lesson-play__search-con"
             style="margin-bottom: 13px;">
<zw-layout row style="align-items: center; height: 100%"
>
  <div style="width: 35px;"><div class="r-lesson-play__search"
                                 style="background-repeat: no-repeat; margin-left: 15px">&nbsp;</div></div>
  <div style="flex: 1;"><el-input></el-input></div>
</zw-layout>
        </div>
        <div class="z-page-lesson-common__card z-page-lesson-play__video-list" style="margin-bottom: 22px">
          <zw-tabs class="z-tabs" selected="1" >
            <z-tab-pane index="1">
              <template #label="scope">直播源</template>
              <div style="width: 100%">
                <z-space direction="Top" style="width: 100%" column-gap="6px" vertical>
                  <div class="z-page-lesson-play__source-card"
                  v-for="liveItem in sources.live" :key="liveItem.id"
                  >
                    <z-space vertical>
                      <div>{{liveItem.name}}</div>
                      <div>{{liveItem.time}}</div>
                    </z-space>
                  </div>
                </z-space>
              </div>
            </z-tab-pane>
            <z-tab-pane index="2">
              <template #label="scope">视频库</template>
              <div style="width: 100%">
                <z-space direction="Top" style="width: 100%" column-gap="6px" vertical>
                  <div class="z-page-lesson-play__source-card"
                       v-for="liveItem in sources.static" :key="liveItem.id"
                  >
                    <z-space vertical>
                      <div>{{liveItem.name}}</div>
                      <div>{{liveItem.time}}</div>
                    </z-space>
                  </div>
                </z-space>
              </div>
            </z-tab-pane>
            <!--          <z-tab-pane :label="'Tab' + i" :key="i" :index="i + ''" v-for="i in tabArr">Content for Tab {{i}}</z-tab-pane>-->

          </zw-tabs>

        </div>
        <div class="z-page-lesson-common__card z-page-lesson-play__relate">
          <fox-detail-panel>
            <template #title>相关看点</template>
            <div>
              <div class="z-page-lesson-play__relate-item-con"
                   v-for="(item, index) in related" :key="item.id"
              >
                <zw-layout  class="z-page-lesson-play__relate-item" row style="align-items: center">
                  <div index>{{index + 1}}.</div><div content>{{item.name}}</div>
                </zw-layout>
                <div class="z-page-lesson-play__border" style="margin-top: 10px"></div>
              </div>
            </div>
          </fox-detail-panel>
        </div>
      </div>
    </zw-row>
  </div>
</template>

<script>
import {ZPageMixin} from "@/zpkgs/components/z-pages/ZPageMixin";
import FoxDetailPanel from "@/zpkgs/components/z-pages/FoxDetailPanel";
import ZVideoPlayer from "@/zpkgs/components/z-video-player/ZVideoPlayer";

export default {
  name: 'ZPageLessonPlay',
  components: {ZVideoPlayer, FoxDetailPanel},
  mixins: [
    ZPageMixin
  ],
  data() {
    return {
      inited: false,
      item_id: ZY.rid(),
      playerOptions: {
        // videojs options
        muted: true,
        language: 'en',
        playbackRates: [0.7, 1.0, 1.5, 2.0],
        sources: [
          {
            type: "video/mp4",
            src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm"
          }
        ],
        poster: "img.jpg",
      },
      sources: {
        live: [
          {
            id: ZY.rid(),
            name: '测试数据源2',
            time: '2022-06-13 18:00:00'
          },
          {
            id: ZY.rid(),
            name: '测试数据源2',
            time: '2022-06-13 18:00:00'
          }
        ],
        static: [
          {
            id: ZY.rid(),
            name: '测试数据源2',
            time: '2022-06-13 18:00:00'
          },
          {
            id: ZY.rid(),
            name: '测试数据源2',
            time: '2022-06-13 18:00:00'
          }
        ]
      },
      related: [
        {
          id: ZY.rid(),
          name: '相关推荐1',
        },
      ]
    }
  },
  methods: {

  },
  mounted() {

  }
}
</script>
